<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>自由职业计划之OKR与PDCA日历</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="main.css"/>
</head>
<body>
<div class="container">
    <div class="left">
        <div id="okr-content"></div>
        <div id="okr-monthly" class="okr-section okr-progress-section">

        </div>
    </div>
    <div class="right">
        <div class="calendar">
            <div class="calendar-header"></div>
            <table class="calendar-table">
                <thead>
                <tr>
                    <th>一</th>
                    <th>二</th>
                    <th>三</th>
                    <th>四</th>
                    <th>五</th>
                    <th>六</th>
                    <th>日</th>
                </tr>
                </thead>
                <tbody id="okr-calendar"></tbody>
            </table>
            <div class="calendar-note">注：日历内容看似排的松散，实则每天只有2-3小时，对于上班有娃还小白的人来说已经相当紧张，咱量力而行就成。</div>
        </div>
    </div>
</div>

<script type="text/javascript" src="data7.js"></script>
<script type="text/javascript">
    function renderQuarterlyOKR(data) {
        const container = document.getElementById('okr-content');
        let html = '';

        const newH2 = document.createElement('h2');
        newH2.innerHTML = `${data.title}`;

        // 插入到 container 的前面，且是同级元素
        container.parentNode.insertBefore(newH2, container);

        const newH3 = document.createElement('h3');
        newH3.innerHTML = `${data.subtitle}`;

        // 插入到 container 的前面，且是同级元素
        container.parentNode.insertBefore(newH3, container);

        data.krs.forEach(kr => {
            html += `<div class="okr-section okr-progress-section">
                <h3 class="okr-collapse">🎯 ${kr.title}</h3>
                <div id="kr1-content" class="flex flex-wrap justify-around w-full">`;

            kr.items.forEach(item => {
                const circumference = 131.95;
                const percentage = getPercentage(item);
                const dashOffset = circumference - (circumference * percentage) / 100;

            html += `<div class="okr-kr okr-tooltip">
              <div class="okr-kr-row">
                <span class="okr-circle-progress">
                  <svg width="48" height="48">
                    <circle cx="24" cy="24" r="21" stroke="#e0e6ed" stroke-width="5" fill="none"/>
                    <circle cx="24" cy="24" r="21" stroke="#2d6cdf" stroke-width="5" fill="none"
                            stroke-dasharray="${circumference}"
                            stroke-dashoffset="${dashOffset.toFixed(2)}"
                            transform="rotate(-90 24 24)"/>
                    <text x="24" y="27" class="okr-circle-text">${percentage}%</text>
                  </svg>
                </span>
                <span class="okr-label">${item}</span>
              </div>
            </div>`;
            });

            html += '</div></div>';
        });

        container.innerHTML = html;
    }

    function renderMonthlyOKR(data) {
        const container = document.getElementById('okr-monthly');
        if (!container) return;

        container.innerHTML = `<h4>${data.title}</h4>`;

        data.krs.forEach(kr => {
            const percentage = getPercentage(kr.progress);
            container.innerHTML += `<div class="okr-kr">
            <div class="okr-kr-row">
              <span class="okr-label">${kr.label}</span>
              <span class="progress-label">${kr.progress}</span>
            </div>
            <div class="progress-bar-bg">
              <div class="progress-bar" style="width: ${percentage}%"></div>
            </div>
          </div>`;
        });
    }

    function renderCalendar(data) {
        const calendarBody = document.getElementById('okr-calendar');

        const calendarTitle = document.querySelector('.calendar-header');
        calendarTitle.innerHTML = `<h3>${data.title}</h3>`;

        // 获取当前日期
        const today = new Date();
        const currentYear = today.getFullYear();
        const currentMonth = today.getMonth() + 1;  // getMonth() 返回 0-11 的值，所以加 1 得到实际月份
        const currentDate = today.getDate();

        const firstDay = getFirstDayOfMonth(data.year, data.month - 1); // 获取当月第一天是星期几
        const daysInMonth = new Date(data.year, data.month, 0).getDate(); // 获取当月天数

        let row = '<tr>', wk = firstDay;
        // 填充前导空格
        for (let i = 1; i < firstDay; i++) {
            row += '<td></td>';
        }

        for (let day = 1; day <= daysInMonth; day++) {
            let cell = `${day}<br>`;

            if (data[day]) {
                data[day].forEach(event => {
                    cell += `<span class="calendar-event ${[event.color]}">${event.text}</span>`;
                });
            }

            // 如果当天是今天，则添加小红点
            if (data.year === currentYear && data.month === currentMonth && day === currentDate) {
                row += `<td class="today">${cell}<div class="dot">📌</div></td>`;
            } else {
                row += `<td>${cell}</td>`;
            }

            // 每满7列换行
            if (wk++ === 7) {
                row += '</tr><tr>';
                wk = 1;
            }
        }

        // 补齐最后一行的空格
        const remaining = (7 - ((daysInMonth + firstDay) % 7)) % 7 + 1;
        for (let i = 0; i < remaining; i++) {
            row += '<td></td>';
        }

        row += '</tr>';
        calendarBody.innerHTML += row;
    }

    document.addEventListener('DOMContentLoaded', function () {

        renderQuarterlyOKR(quarterlyOKR);
        renderMonthlyOKR(monthlyOKR);
        renderCalendar(calendarTasks);

    });

    // 自动计算占比和进度条
    function getPercentage(labelText) {
        const rst = labelText.match(/\(.*?\)/);
        let match;

        if (rst != null && rst.length > 0) {
            const bracketContent = rst[0];
            // 使用正则提取括号内的数值部分，如 "12/30"
            match = bracketContent.match(/(\d+)\/(\d+)/);
        } else
            match = labelText.match(/(\d+)\/(\d+)/);

        if (match) {
            const current = parseInt(match[1], 10);
            const total = parseInt(match[2], 10);

            if (total > 0) {
                return Math.round((current / total) * 100);
            }
        }

        return 0;
    }

    function getFirstDayOfMonth(year, month) {
        // 注意：month 是从 0 开始的（0=一月）
        const date = new Date(year, month, 1);
        let wk = date.getDay();
        return wk === 0 ? 7 : wk; // 返回 0（星期日）~ 6（星期六）
    }

</script>

</body>
</html>